<template>
	<div class="mpnews">
		<div v-if="news.length>1" v-for="(n,index) in news" :key="n.id" class="news" v-bind:class="{'item':index>0}">
			<img v-if="!index" :src="n.pic">
	        <i v-else class="thumb" v-bind:style="{backgroundImage:'url('+n.pic+')'}"></i>
			<div v-if="!index" class="newsTitle">{{n.title}}</div>
	        <span v-else class="child_title">{{n.title}}</span>
		</div>
		<div v-else class="one">
			<p class="one-title">{{news[0].title}}</p>
			<i class="one-thumb" v-bind:style="{backgroundImage:'url('+news[0].pic+')'}"></i>
			<p class="one-desc">{{news[0].desc}}</p>
		</div>
	</div>
</template>
<script>

    export default {
    	props :{
            news :{
            	type : Array,
            }
        },
        data () {
            return {
                
            }
        },
    }
</script>
<style>
	.mpnews{padding-left: 8px;padding-right: 8px;}
	.news,.one{clear: both;position: relative;}
	.news img{width: 100%;}
	.news.item{height: 70px;}
	.news .thumb{float: right; margin-left: 12px; width: 60px; height: 60px; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; background-color: #F6F8F9;}
	.news .newsTitle{color: #FFFFFF; background-color: rgba(0, 0, 0, 0.55); position: absolute; left: 0px; right: 0px; bottom: 12px; padding: 8px 12px;font-size: 16px;  font-weight: 400; display: block; line-height: 1.2;}
	.mpnews .one-title{font-size: 16px; font-weight: 400; display: block; line-height: 1.2; color: #353535;}
	.mpnews .one-thumb{width: 100%; height: auto; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; background-color: #F6F8F9; padding-bottom: 56.25%; display: block;}
	.mpnews .one-desc{padding-top: 12px; color: #9A9A9A;}
</style>